<template>
	<view class="doctor-login-content" :style="{paddingTop: statusBarHeight + height + 'px', backgroundImage: 'url(' +  `${prefix_image}/homepage/IntegralRecord/payDesk-bg.png` + ')' }">
		<view class="doctor-login-content-tips">
			欢迎来到狗狗TALK医生端
		</view>
		<view class="doctor-login-content-account">
			<view class="doctor-login-content-account-list">
				<text class="doctor-login-content-name">账号</text>
				<input v-model="account" :maxlength="11" class="doctor-login-content-input" placeholder="用户名/手机号" />
			</view>
			<view class="doctor-login-content-account-list" style="padding-top: 68rpx;">
				<text class="doctor-login-content-name">密码</text>
				<input v-model="password" :maxlength="16" class="doctor-login-content-input" password="true" placeholder="请输入密码" />
			</view>
			<view class="doctor-login-button" @tap="login()">登录</view>
	
	</view>
</view>
</template>

<script>
	import store from '@/store';
	import config from '@/hooks/useConfig.js'
	import {
		defineComponent,
		reactive,
		toRefs,
		getCurrentInstance
	} from "vue"
	export default defineComponent({
		setup() {
			const {
				height,
				statusBarHeight
			} = store.state.phoneInfo
			const {
				prefix_image
			} = config()
			const data = reactive({
				prefix_image,
				statusBarHeight,
				height,
				account: '', // 用户名/手机号
				password: '' // 密码
			})
			const {
				appContext: {
					config: {
						globalProperties: global

					},
				},
			} = getCurrentInstance()

			const login = () => {
				// var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				// if (!myreg.test(data.account)) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return
				// }
				if(data.account == '') {
					uni.showToast({
						title: '请输入账号或手机号',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (data.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					});
					return
				}
				global.$request.post('/v1/api/doctor/login', {
					account: data.account,
					password: data.password
				}).then((res) => {
					if(res.code === 1) {
						store.dispatch('login', {
							code: res.data.token,
							userInfo: res.data
						})
						uni.navigateTo({
							url:'/pages/medicalRecordList/index',
						})
					} else {
						uni.showToast({
							title: '用户名或密码错误!',
							icon: 'none',
							duration: 2000
						});
					}
				})
			}

			return {
				...toRefs(data),
				login

			}
		}
	})
</script>

<style lang="stylus" scoped>
	.doctor-login-content {
		min-height: 100vh;
		background-size: 100% 100%;
		padding: 0rpx 32rpx;

		.doctor-login-content-tips {
			font-size: 40rpx;
		}

		.doctor-login-content-account {
			width: 686rpx;
			height: 770rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 68rpx 48rpx 64rpx 48rpx;
			box-sizing: border-box;
			margin-top: 85rpx;

			.doctor-login-content-account-list {
				display: flex;
				flex-direction: column;

				.doctor-login-content-name {
					font-size: 40rpx;
					// font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					padding-bottom: 50rpx;
				}

				.doctor-login-content-input {
					font-size: 32rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B2B2B2;
					padding-bottom: 32rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
				}
			}

			.doctor-login-button {
				width: 590rpx;
				height: 96rpx;
				background: #FFD300;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;

				font-size: 32rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #111111;
				margin-top: 106rpx;
			}
		}
	}
</style>
